<template>
	<div class="daihuodarenbang">
		<div class="haowubang_header">
			<div class="haowubang_header1">
				<div>日榜</div>
				<div>
					<el-date-picker
					  v-model="value2"
					  align="right"
					  type="date"
					  placeholder="选择日期"
					  :picker-options="pickerOptions">
					</el-date-picker>
				</div>
				<div @click="chakan">
					查看达人分布
				</div>
				<div>数据说明<i class="el-icon-question"></i></div>
			</div>
			<div class="haowubang_header2">
				<span>更新日期：</span>
				<span>2020-10-28 12：07</span>
				<span v-loading.fullscreen.lock="fullscreenLoading" @click="xiazai"><i class="el-icon-printer"></i>导出数据</span>
			</div>
		</div>
		<!--达人分布查看的内容-->
		<el-dialog
		  title="样本数据时间：2020-10-30"
		  :visible.sync="centerDialogVisible"
		  width="80%">
		  
		 <div class="shanxing">
			  <div class="shanxing1">
				  <div class="shouye_tou1">
				  	<span>达人标签分布</span>
				  </div>
				  <div class="bingzhuang">
					  <div id="container"></div>
				  </div>
			  </div>
			  <div class="shanxing2">
			  		<div class="shouye_tou2">
			  			<span>达人粉丝量分布</span>
			  		</div>	
					<div class="bingzhuang">
						<div id="container1"></div>
					</div>
			  </div>
		  </div>
		  
		</el-dialog>
		
		<div class="haowubiao">
			<table cellpadding="0" cellspacing="0">
				<thead>
					<tr>
						<th>排名</th>
						<th></th>
						<th>达人名称</th>
						<th>标签</th>
						<th>粉丝量</th>
					</tr>
				</thead>
				
				<tbody>
					<tr v-for="(item,index) in haowu" :key="index">
						<td>
							<img v-if="index==0" src="../../../assets/img/jinpai.png" />
							<img v-else-if="index==1" src="../../../assets/img/yinpai.png" />
							<img v-else-if="index==2" src="../../../assets/img/tongpai.png" />
							<span v-else>{{index+1}}</span>
						</td>
						<td>
							<!-- <img src="../../../assets/img/datou.png" /> -->
							<img :src="item.tu" />
						</td>
						<td>
							<span>{{item.name}}</span>
							<span>近30天上榜6次</span>
						</td>
						<td>
							{{item.qian}}
						</td>
						<td>
							{{item.shu | guolv}}
						</td>
					</tr>
				</tbody>
			</table>
		</div>
		
		<div class="fenye" style="text-align: center;">
			<el-pagination
			  @size-change="handleSizeChange"
			  @current-change="handleCurrentChange"
			  :hide-on-single-page="yindi"
			  :current-page="currentPage4"
			  :page-sizes="[100, 200, 300, 400]"
			  :page-size="100"
			  layout="total, sizes, prev, pager, next, jumper"
			  :total="4001">
			</el-pagination>
		</div>
		
	</div>
</template>

<script>
	import { Chart, Util } from '@antv/g2';
	export default{
		name:"daihuodarenbang",
		data(){
			return{
				centerDialogVisible: true,
				
				fullscreenLoading:false,
				//分页
				yindi:true,//当数据是由一页时，就不显示分页器
				currentPage4: 1,
				
				column:[
				  {
				    title: '排名',
				    key: 'id',
				    type: 'text'
				  },
				  {
				    title: '达人头像',
				    key: 'tu',
				    type: 'image',
					width:100,
					height:100
				  },{
				    title:'签名',
				    key:'qian',
				    type:'text'
				  },
				  {
					  title:'粉丝数',
					  key:'shu',
					  type:'text'
				  }
				],
				haowu:[
					{
						id:'1',
						name:'光头强',
						tu:'https://www.koltuita.com/wxxcx/img/val1.png',
						qian:'小哥哥 | 正能量',
						shu:234232,
					},
					{
						id:'2',
						name:'熊大',
						tu:'https://www.koltuita.com/wxxcx/img/val4.png',
						qian:'小妹妹 | 大能量',
						shu:23456454232,
					},
					{
						id:'3',
						name:'熊二',
						tu:'https://www.koltuita.com/wxxcx/img/val1.png',
						qian:'小姐姐 | 小能量',
						shu:56734,
					}
				],
				
				data : [
				  { type: '小姐姐', value: 0.11 },
				  { type: '种草开播', value: 0.05 },
				  { type: '时尚', value: 0.12 },
				  { type: '穿搭', value: 0.13 },
				  { type: '时尚美妆', value: 0.08 },
				  { type: '小哥哥', value: 0.06 },
				  { type: '情感', value: 0.1 },
				  { type: '搞笑', value: 0.08 },
				  { type: '服装配饰', value: 0.07 },
				  { type: '其它', value: 0.3 },
				],
				data1:[
					{ type: '50万以下', value: 0.34 },
					{ type: '50-100万', value: 0.1 },
					{ type: '100-200万', value: 0.08 },
					{ type: '200-500万', value: 0.24 },
					{ type: '500万以上', value: 0.24 },
				],
				
				//日期选择
				pickerOptions: {
				  disabledDate(time) {
					return time.getTime() > Date.now();
				  },
				  shortcuts: [{
					text: '今天',
					onClick(picker) {
					  picker.$emit('pick', new Date());
					}
				  }, {
					text: '昨天',
					onClick(picker) {
					  const date = new Date();
					  date.setTime(date.getTime() - 3600 * 1000 * 24);
					  picker.$emit('pick', date);
					}
				  }, {
					text: '一周前',
					onClick(picker) {
					  const date = new Date();
					  date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
					  picker.$emit('pick', date);
					}
				  }]
				},
				value1: '',
				value2: '',
				
				tuZonggao:'',
				wenda:'',
			}
		},
		//过滤器
		filters:{
			guolv(shuzi){
				  if(shuzi>0){
					var wan=parseInt(shuzi).toString();
					var qumo=wan%10000;
					//粉丝数改变
					if(wan.length<5){
						shuzi=wan;
					}else if(wan.length>4 && wan.length<=8){
						let fen_si=parseFloat(parseInt(wan/10000))+'.'+qumo.toString().substring(0,2)+'w';
						shuzi=fen_si;
					}else if(wan.length>8){
						let fen_si=parseFloat(parseInt(wan/100000000))+'.'+qumo.toString().substring(0,2)+'亿';
						shuzi=fen_si;
					}
				  }
				  return shuzi
			}
		},
		mounted:function(){
			//出现加载动画开始和结束
			this.$store.commit("startLoading")
			this.$store.commit("endLoading")
			
			this.tuZonggao=document.body.offsetWidth*0.3;
			this.wenda=document.body.offsetWidth*0.007;
			console.log(this.wenda)
			
			$(window).resize(()=>{
				this.tuZonggao=document.body.offsetWidth*0.2;
				this.wenda=document.body.offsetWidth*0.007;
			})
			
			setTimeout(()=>{
				this.centerDialogVisible=false;
			},2)
			
			setTimeout(()=>{
				this.bingtu();
				this.bingtu1();
			},3)
		},
		methods:{
			handleSizeChange(val) {
				console.log(`每页 ${val} 条`);
			},
			handleCurrentChange(val) {
				console.log(`当前页: ${val}`);
			},
			
			//点击导出表格数据到exe表
			xiazai(){
				this.fullscreenLoading = true;
				setTimeout(() => {
					this.fullscreenLoading = false;
					this.$message.success("数据导出成功！")
					
					this.table2excel(this.column, this.haowu, "带货达人榜单")//生成Excel表格，自动下载
				}, 2000);
			},
			
			chakan(){
				this.centerDialogVisible=true;
			},
			bingtu(){
				const chart = new Chart({
				  container: 'container',
				  autoFit: true,
				  height: this.tuZonggao,
				});
				
				chart.data(this.data);
				
				chart.coordinate('theta', {
				  radius: 0.75
				});
				chart.tooltip({
				  showMarkers: false
				});
				
				chart.legend({
				  position: 'right'
				});
				
				const interval = chart
				  .interval()
				  .adjust('stack')
				  .position('value')
				  .color('type', ['#063d8a', '#1770d6', '#47abfc', '#38c060','#F6564A','#0BFE04','#95FF6B','#FE00FE','#14C6C9','#888888'])
				  .style({ opacity: 0.4 })
				  .state({
				    active: {
				      style: (element) => {
				        const shape = element.shape;
				        return {
				          matrix: Util.zoom(shape, 1.1),
				        }
				      }
				    }
				  })
				  .label('type', (val) => {
				    const opacity = val === '四线及以下' ? 1 : 0.5;
				    return {
				      offset: -30,
				      style: {
				        opacity,
				        fill: 'white',
				        fontSize: this.wenda,
				        shadowBlur: 2,
				        shadowColor: 'rgba(0, 0, 0, .45)',
				      },
				      content: (obj) => {
				        return obj.type + '\n' + obj.value + '%';
				      },
				    };
				  });
				
				chart.interaction('element-single-selected');
				
				chart.render();
			},
			bingtu1(){
				const chart = new Chart({
				  container: 'container1',
				  autoFit: true,
				  height: this.tuZonggao,
				});
				
				chart.data(this.data1);
				
				chart.coordinate('theta', {
				  radius: 0.75
				});
				chart.tooltip({
				  showMarkers: false
				});
				
				chart.legend({
				  position: 'right'
				});
				
				const interval = chart
				  .interval()
				  .adjust('stack')
				  .position('value')
				  .color('type', ['#063d8a', '#1770d6', '#47abfc', '#38c060','#F6564A'])
				  .style({ opacity: 0.4 })
				  .state({
				    active: {
				      style: (element) => {
				        const shape = element.shape;
				        return {
				          matrix: Util.zoom(shape, 1.1),
				        }
				      }
				    }
				  })
				  .label('type', (val) => {
				    const opacity = val === '四线及以下' ? 1 : 0.5;
				    return {
				      offset: -30,
				      style: {
				        opacity,
				        fill: 'white',
				        fontSize: this.wenda,
				        shadowBlur: 2,
				        shadowColor: 'rgba(0, 0, 0, .45)',
				      },
				      content: (obj) => {
				        return obj.type + '\n' + obj.value + '%';
				      },
				    };
				  });
				
				chart.interaction('element-single-selected');
				
				chart.render();
			}
		}
	}
</script>

<style scoped="scoped" lang="scss">
	*{
		margin: 0;
		padding: 0;
	}
	.daihuodarenbang{
		
		.haowubang_header{
			padding: 0.8rem 2rem;
			background-color: #fff;
			border-bottom-left-radius:0.1rem ;
			border-bottom-right-radius:0.1rem ;
			
			.haowubang_header1{
				float: left;
				display: flex;
				justify-content: space-between;
				align-items: center;
				
				div:nth-of-type(1){
					color: #666;
					font-size: 0.4rem;
				}
				div:nth-of-type(2){
					color: #666;
					font-size: 0.4rem;
					margin: 0 1rem ;
				}
				div:nth-of-type(3){
					color: #0091FF;
					cursor: pointer;
					font-size: 0.4rem;
					margin-right:1rem ;
				}
				div:nth-of-type(4){
					color: #666;
					font-size: 0.4rem;
					cursor: pointer;
					i{
						margin-left:0.2rem ;
					}
				}
				div:nth-of-type(4):hover{
					color: #0091FF;
				}
			}
			.haowubang_header2{
				float: right;
				display: flex;
				justify-content: space-between;
				align-items: center;
				
				span:nth-of-type(1){
					color: #333333;
					font-size: 0.4rem;
				}
				span:nth-of-type(2){
					color: #666666;
					font-size: 0.4rem;
					margin-right:1rem ;
				}
				span:nth-of-type(3){
					color: #666666;
					font-size: 0.4rem;
					padding: 0.1rem 0.3rem;
					border: 1px solid #D4D4D4;
					border-radius:0.1rem ;
					cursor: pointer;
					
					i{
						margin-right:0.2rem ;
					}
				}
				span:nth-of-type(3):hover{
					color: #fff;
					background-color: #0091FF;
				}
				
			}
		}
		.haowubang_header::after{
			content: "";
			display: block;
			clear: both;
		}
		.shanxing{
			
			.shanxing1{
				width: 50%;
				float: left;
				.shouye_tou1{
					height: 100%;
					box-sizing: border-box;
					float: left;
					position: relative;
					
					span{
						color: #000000;
						font-weight: 600;
						font-size: 0.45rem;
						display: block;
						margin-left:0.8rem ;
					}
					
					span::before{
						content: "";
						display: block;
						position: absolute;
						top: -0.1rem;
						left: 0;
						width: 0.3rem;
						height: 0.8rem;
						background-color: #1890FF;
					}
				}
				.shouye_tou1::after{
					content: "";
					display: block;
					clear: both;
				}
			}
			.shanxing1::after{
				content: "";
				display: block;
				clear: both;
			}
			.shanxing2{
				float: left;
				width: 50%;
				
				.shouye_tou2{
					height: 100%;
					box-sizing: border-box;
					float: left;
					position: relative;
					
					span{
						color: #000000;
						font-weight: 600;
						font-size: 0.45rem;
						display: block;
						margin-left:0.8rem ;
					}
					
					span::before{
						content: "";
						display: block;
						position: absolute;
						top: -0.1rem;
						left: 0;
						width: 0.3rem;
						height: 0.8rem;
						background-color: #1890FF;
					}
				}
				.shouye_tou2::after{
					content: "";
					display: block;
					clear: both;
				}
			}
		}
		.shanxing::after{
			content: "";
			display: block;
			clear: both;
		}
		
		
		.haowubiao{
			margin-top:1rem ;
			background-color: #fff;
			border-radius:0.1rem ;
			
			table{
				padding: 0.4rem 0.8rem;
				width: 100%;
				
				th{
					color: #333333;
					font-size: 0.42rem;
					font-weight: normal;
					padding: 0.8rem 0;
					text-align: center;
				}
				th:nth-of-type(3){
					text-align: left;
					width: 8rem;
				}
				td{
					padding: 0.8rem 0;
					color: #333333;
					font-size: 0.4rem;
					text-align: center;
				}
				tr:hover td{
					background-color: rgba(229,244,255,1);
				}
				td:nth-of-type(2) img{
					width: 1.4rem;
					height: 1.4rem;
					border-radius:50% ;
				}
				
				td:nth-of-type(3){
					color: #333;
					text-decoration: none;
					display: flex;
					align-items: center;
					span:nth-of-type(1){
						margin-top:0.5rem ;
						margin-bottom:0.5rem ;
						display: block;
						overflow : hidden;
						text-overflow: ellipsis;
						display: -webkit-box; 
						-webkit-line-clamp: 1; /* 可以显示的行数，超出部分用...表示*/
						-webkit-box-orient: vertical;
					}
					span:nth-of-type(2){
						display: inline;
						padding: 0.1rem 0.3rem;
						border: 1px solid #999999;
						border-radius:0.1rem ;
						font-size: 0.35rem;
						margin-left:0.2rem ;
						white-space: nowrap;//强制不换行
					}
				}
				td:nth-of-type(3)::after{
					content: "";
					display: block;
					clear: both;
				}
				
				td:last-child{
					color: #333;
					font-size: 0.4rem;
					
					i{
						cursor: pointer;
					}
					
					i:nth-of-type(2){
						margin: 0 0.2rem;
					}
				}
				
			}
		}
	}
</style>
